<template>
  <div class="pc_banner">
    <div class="warn-box">
      <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
      <p>店铺轮播图要求尺寸：宽度750像素，高度340像素。图片格式JPG、PNG等格式，图片大小不可超过1M。</p>
    </div>
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
      </h5>
      <el-button v-if="$hasMethod('#add')" size="small" class="add-btn" icon="el-icon-plus" @click="openAdd()">添加轮播图</el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column align="center" label="排序" width="80">
        <template slot-scope="scope">
          <!-- onkeyup="value=value.replace(/[^\d]/g,'')" -->
          <span v-if="!$hasMethod('#sort')">{{ scope.row.banner_sort }}</span>
          <el-input v-else oninput="value=value.replace(/[^\d]/g,'')" v-model="scope.row.banner_sort" maxLength='9' @change="changeSort(scope.row.id, scope.row.banner_sort)" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="id" label="轮播图ID" />
      <el-table-column align="center" label="图片" width="200">
        <template slot-scope="scope">
          <el-image fit="fill" class="banner_img" :src="$globalObj.imgBaseUrl + scope.row.banner_img">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="create_time" width="100" label="添加时间" />
      <el-table-column align="center" label="链接类型">
        <template slot-scope="scope">
          <span>{{ scope.row.jump_type == 1 ? "商品" : scope.row.jump_type == 2 ? "http链接" : "小程序" }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="banner_url" label="关联链接" />
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">{{ scope.row.status == 1 ? '已上架' : '已下架' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="280" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="$hasMethod('#edit')" size="mini" type="primary" @click="openAdd(scope.row.id)">编辑</el-button>
          <el-button v-if="$hasMethod('#enable')" size="mini" type="warning" @click="changeStatus(scope.row.id, scope.row.status)">{{ scope.row.status == 1 ? '下架' : '上架' }}</el-button>
          <el-button v-if="$hasMethod('#delete')" size="mini" type="danger" @click="removeItem(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page ref="customPage" :total="total" @getList="getList" />
    <add-dialog ref="addDialog" :edit-id="editId" @getList="getList" />
  </div>
</template>

<script>
import { h5BannerSetList, addOrEditH5BannerSet, delH5BannerSet } from '@/api/recommend'
import addDialog from './add'
import customPage from '@/components/customPage'
export default {
  components: { addDialog, customPage },
  data() {
    return {
      tableData: [],
      total: 0,
      editId: null
    }
  },
  methods: {
    // 弹出添加弹窗
    openAdd(id) {
      this.editId = id ? id : null
      this.$refs.addDialog.dialogVisible = true
    },
    // 更改状态
    changeStatus(id, status) {
      addOrEditH5BannerSet({
        id,
        status: status === 1 ? 0 : 1
      }).then(res => {
        this.getList()
      })
    },
    // 更改顺序
    changeSort(id, val) {
      addOrEditH5BannerSet({
        id,
        banner_sort: val
      }).then(res => {
        this.getList()
      })
    },
    // 删除
    removeItem(id) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        delH5BannerSet(id).then(res => {
          this.getList()
        })
      }).catch(() => { })
    },
    getList() {
      const { page, pageSize } = this.$refs.customPage;
      h5BannerSetList({ page, pageSize }).then(res => {
        this.tableData = res.data
        this.total = res.total
      })
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.banner_img {
  width: 195px;
  height: 45px;
  line-height: 45px;
}
</style>
